<template>
	<view class="container">
		<view v-if="bankcardId==0" class="zy-bank" @click="withdrawDeposit">
			请选择提现到账的银行卡
		</view>
		<view v-else class="zy-list-bank"  @click="withdrawDeposit">
			<bank-item :bankCode="bankcard.bankCode" :cardCode="bankcard.bankcardNo" :bankName="bankcard.bankName"></bank-item>
		</view>
		<view class="list-cell-section icon">
			
			<view class="zy-list-cell b-b m-t" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">可提现余额</text>
				<text class="cell-content">{{available || 0}}</text>
			</view>
			<view class="zy-list-cell b-b m-t" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-tit">提现余额</text>
				<input class="cell-content" type="number" v-model="amount" placeholder="请输入提现余额" />
				<text class="zy-list-text-extra" @click="withdrawAll">全部提现</text>
			</view>
		</view>
		
		<button class="zy-add-btn" @click="submitWithdraw">申请提现</button>
	</view>
</template>

<script>
	import bankItem from '@/components/bank-item/bank-item.vue'
	import { doPostJson, doPostForm, doGet, showInfoToast } from '@/common/util.js'
	import * as ResponseStatus from '@/common/response-status'
	import zyworkIcon from '@/components/zywork-icon/zywork-icon.vue'
	import listCell from '@/components/mix-list-cell';
	
	export default {
		components: {
			listCell,
			bankItem,
			zyworkIcon
		},
		data() {
			return {
				userWallet: {},
				available: null,
				amount: null,
				bankcard:{},
				bankcardId:0,
				submitAddress: false
			}
		},
		onLoad(options) {
			this.userWallet = JSON.parse(options.userWallet)
			this.loadAvailableBalance()
		},
 		methods: {
			loadAvailableBalance() {
				doGet('/withdraw/user/available', {}, {}, true).then(response => {
					let [error, res] = response
					if (res.data.code === ResponseStatus.OK) {
						this.available = res.data.data
					}
				}).catch(error => {
					console.log(error)
					showInfoToast('网络开小差，请稍候再试')
				})
			},
			withdrawAll() {
				this.amount = this.available
			},
			withdrawDeposit(){
				uni.navigateTo({
					url:"/pages/user/paylist/paylist?source=1"
				})
			},
			submitWithdraw() {
				if (this.available === null) {
					showInfoToast('请等待加载可提现余额')
					return
				}
				if (this.available <= 0) {
					showInfoToast('可提现余额不足')
					return
				}
				if (!this.amount) {
					showInfoToast('请输入提现余额')
					return
				}
				if (this.amount > this.available) {
					showInfoToast('提现余额大于可提现余额，请修改')
					return
				}
				if(this.bankcardId==0){
					this.withdrawDeposit();
					return
				}
				this.submitAddress =true
				doPostForm('/withdraw/user/submit', {
					withdrawType: 0,
					clientApp: 2, 
					bankcardId:this.bankcardId,
					amount: this.amount
				}, {}, true).then(response => {
					let [error, res] = response
					if (res.data.code === ResponseStatus.OK) {
						showInfoToast(res.data.message)
						this.submitAddress =false
						setTimeout(() => {
						      uni.navigateBack()
						}, 1000)
					} else {
						showInfoToast(res.data.message)
					}
				}).catch(error => {
					console.log(error)
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/zywork-main.scss';
	.zy-add-btn{
		background-color: #00AA7F;
		box-shadow: 1px 2px 5px rgba(0, 170, 127, 0.4);
	}
	.zy-list-bank{
		padding: 0rpx 30rpx;
		view{
			color: #FFFFFF;
		}
		text{
			color: #FFFFFF;
		}
	}
	.zy-bank{
		margin: 0rpx auto;
		width: 690rpx;
		height: 300rpx;
		text-align: center;
		line-height: 300rpx;
		font-size: $font-lg;
		color: #aaaaaa;
		border: solid 1rpx #EEEEEE;
	}
	.zy-head {
		padding: 10upx 0upx;
		margin-top: 20upx;
		background: #FFF;
	}
	.zy-head-title {
		border-left: 5px solid #00aa7f;
		padding-left: 20upx;
		margin-left: 20upx;
		font-size: 28upx;
	}
	.zy-list-text-extra {
		font-size: 24upx;
		color: #00aa7f;
		padding-left: 15upx;
	}
	
	.list-cell-section {
		padding: 30upx 0 0;
		margin-top: 20upx;
		background: #fff;
		border-radius: 10upx;
	}
</style>
